<h1>Theme Plugin</h1>

<p>The <em>theme</em> plugin gives you access to theme assets and partials. It a critical and extremely useful plugin for building your sites with PyroCMS.</p>

<p>The theme plugin's slug is <strong>theme</strong>, so it can be used like so:</p>

<pre class="tags">{pyro:theme:<em>function</em>}</pre>

<h2>Functions</h2>

<h3>{pyro:theme:options}</h3>

<p>
	Displays an option for the current theme. To read more about this tag
	and its usage refer to the <a href="#designers/getting_started.html">theme documentation.</a>
</p>

<p><strong>Parameters</strong></p>

<table cellpadding="0" cellspacing="0">

	<tr>
		<th>Parameter</th>
		<th>Description</th>
	</tr>
	
	<tr>
		<td width="100">option</td>
		<td>Required. The option slug to request from the theme.</td>
	</tr>

</table>

<p><strong>Example:</strong></p>

<pre><code>{if '{pyro:theme:options option="layout"}' == 'full-width'}
	&lt;div class="full-width"&gt;
		{pyro:template:body}
	&lt;/div&gt;
{/if}</code></pre>

<br />

<h3>{pyro:theme:partial}</h3>

<p>Loads partial from the current theme.</p>

<p><strong>Parameters</strong></p>

<table cellpadding="0" cellspacing="0">

	<tr>
		<th>Parameter</th>
		<th>Description</th>
	</tr>
	
	<tr>
		<td width="100">name</td>
		<td>Required. Name slug of the theme to be loaded.</td>
	</tr>

</table>

<p><strong>Example:</strong></p>

<pre><code>{pyro:theme:partial name="header"}</code></pre>

<br />

<h3>{pyro:theme:css}</h3>

<p>Generates a &lt;link&gt; to a css file in the current theme.</p>

<p><strong>Parameters</strong></p>

<table cellpadding="0" cellspacing="0">

	<tr>
		<th>Parameter</th>
		<th>Description</th>
	</tr>
	
	<tr>
		<td width="100">file</td>
		<td>Required. Name of the css file.</td>
	</tr>
	<tr>
		<td width="100"><em>misc</em></td>
		<td>This function will take any other link tag attributes and pass them along to the link tag. By default, 'type' and 'rel' are included with default values.</td>
	</tr>

</table>

<p><strong>Example:</strong></p>

<pre><code>{pyro:theme:css file="style.css"}</code></pre>

<pre><code>&lt;link href="themes/default/css/style.css" type="text/css" rel="stylesheet" /&gt;</code></pre>

<br />

<h3>{pyro:theme:image}</h3>

<p>Generates an &lt;img&gt; tag for an file in the current theme.</p>

<p><strong>Parameters</strong></p>

<table cellpadding="0" cellspacing="0">

	<tr>
		<th>Parameter</th>
		<th>Description</th>
	</tr>
	
	<tr>
		<td width="100">file</td>
		<td>Required. Name of the image file.</td>
	</tr>
	<tr>
		<td width="100"><em>misc</em></td>
		<td>This function will take any other image tag attributes and pass them along to the image tag.</td>
	</tr>

</table>

<p><strong>Example:</strong></p>

<pre><code>{pyro:theme:image file="fun.jpg" alt="Fun!"}</code></pre>

<pre><code>&lt;img href="themes/default/img/fun.jpg" alt="Fun!" /&gt;</code></pre>

<br />

<h3>{pyro:theme:js}</h3>

<p>Generates a &lt;js&gt; script link for a javascript file in the current theme.</p>

<p><strong>Parameters</strong></p>

<table cellpadding="0" cellspacing="0">

	<tr>
		<th>Parameter</th>
		<th>Description</th>
	</tr>
	
	<tr>
		<td width="100">file</td>
		<td>Required. Name of the javascript file.</td>
	</tr>

</table>

<p><strong>Example:</strong></p>

<pre><code>{pyro:theme:js file="extra.js"}</code></pre>

<pre><code>&lt;script type="text/javascript" src="themes/default/js/extra.js"&gt;</code></pre>

<br />

<h3>{pyro:theme:favicon}</h3>

<p>Generates a &lt;link&gt; tag for a favicon file in the current theme.</p>

<p><strong>Parameters</strong></p>

<table cellpadding="0" cellspacing="0">

	<tr>
		<th width="100">Parameter</th>
		<th width="100">Default</th>
		<th>Description</th>
	</tr>
	
	<tr>
		<td>file</td>
		<td>favicon.ico</td>
		<td>Optional. Favicon file.</td>
	</tr>
	
	<tr>
		<td>rel</td>
		<td>shortcut icon</td>
		<td>Optional. Favicon rel.</td>
	</tr>
	
	<tr>
		<td>type</td>
		<td>image/x-icon</td>
		<td>Optional. Favicon type.</td>
	</tr>
	
	<tr>
		<td>xhtml</td>
		<td>true</td>
		<td>Optional. Build a W3C valid link tag xhtml? enter false if you uses html5.</td>
	</tr>
	
	<tr>
		<td>base</td>
		<td>path</td>
		<td>Optional. "path" or "url".</td>
	</tr>

</table>

<p><strong>Example:</strong></p>

<pre><code>{pyro:theme:favicon file="favicon.png"}</code></pre>

<pre><code>&lt;link href="/system/pyrocms/themes/default/img/favicon.png" rel="shortcut icon" type="imagem/x-icon"&gt;</code></pre>

<br />

<h3>{pyro:theme:variables}</h3>

<p>Sets or retrieves a variable for the theme of your choosing. Variables can be set in a layout and be used anywhere thereafter.</p>

<p><strong>Parameters</strong></p>

<table cellpadding="0" cellspacing="0">

	<tr>
		<th>Parameter</th>
		<th>Description</th>
	</tr>
	
	<tr>
		<td width="100">name</td>
		<td>Required. Name of the variable.</td>
	</tr>

	<tr>
		<td width="100">value</td>
		<td>Value for the variable to be set. Leave blank to retrieve a previously set variable.</td>
	</tr>

</table>

<p><strong>Example (Variable Setting - nothing displayed):</strong></p>

<pre><code>{pyro:theme:variables name="day_or_night" value="day"}</code></pre>

<p><strong>Example (Variable Retreival):</strong></p>

<pre><code>{pyro:theme:variables name="day_or_night"}</code></pre>

<pre><code>day</code></pre>

